<template>
  <a-spin
    :loading="pageLoading"
    :size="35"
    class="w-[100%]"
    tip="正在加载, 请稍候..."
  >
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="价格名称">
        {{ detail.priceName || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="价格类型">
        <dict-convert
          v-if="detail.priceType"
          :dict-data="dicts[proxy.DICT.lindiPriceType]"
          :dict-key="String(detail.priceType)"
        />
        <span v-else>-</span>
      </a-descriptions-item>
      
      <a-descriptions-item label="单价">
        <span v-if="detail.unitPrice">
          {{ detail.unitPrice }} 万元/亩
        </span>
        <span v-else>-</span>
      </a-descriptions-item>
      
      <a-descriptions-item label="生效时间">
        {{ detail.effectiveDate || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="失效时间">
        {{ detail.expireTime || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="备注说明">
        {{ detail.remark || '-' }}
      </a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getPriceConfigByPriceConfigIdApi } from "~/api/lindi/priceConfig";
import { IconArrowLeft, IconEdit } from '@arco-design/web-vue/es/icon';

//全局实例
const { proxy } = getCurrentInstance();

//路由实例
const router = useRouter();
const route = useRoute();

//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});

//定义事件
const emit = defineEmits(["cancel", "ok"]);

//加载字典
const dicts = proxy.LoadDicts([
  proxy.DICT.lindiPriceType,
]);

// 页面状态
const pageLoading = ref(false);
const priceConfigId = ref(null);

// 详情数据
const detail = reactive({
  priceConfigId: null,
  priceName: null,
  priceType: null,
  unitPrice: null,
  effectiveDate: null,
  expireTime: null,
  remark: null,
});







// 处理取消事件
const handleCancel = () => {
  emit("cancel");
};

// 处理编辑事件
const handleEdit = () => {
  // 如果是在模态框中，关闭模态框并跳转到编辑页
  if (props.params.priceConfigId) {
    emit("cancel");
    // 延迟跳转，确保模态框先关闭
    setTimeout(() => {
      router.push(`/lindi/price/edit?id=${priceConfigId.value}`);
    }, 100);
  } else {
    // 直接访问页面的情况，直接跳转
    router.push(`/lindi/price/edit?id=${priceConfigId.value}`);
  }
};

// 编辑按钮点击事件
const editBtnClick = () => {
  handleEdit();
};

// 返回上一页（兼容直接访问的情况）
const goBack = () => {
  router.back();
};

// 跳转到编辑页（兼容直接访问的情况）
const goEdit = () => {
  router.push(`/lindi/price/edit?id=${priceConfigId.value}`);
};

// 加载详情数据
const loadDetail = () => {
  if (!priceConfigId.value) return;

  pageLoading.value = true;

  // 使用Promise.then()链式调用
  getPriceConfigByPriceConfigIdApi(priceConfigId.value)
    .then((response) => {
      const responseData = response;
      Object.keys(detail).forEach((key) => {
        if (responseData.hasOwnProperty(key)) {
          detail[key] = responseData[key];
        }
      });
    })
    .catch((error) => {
      console.error("加载数据失败:", error);
      proxy.$msg.error(error.message || "加载数据失败");
    })
    .finally(() => {
      pageLoading.value = false;
    });
};

//监听参数变化
watch(
  () => props.params,
  (newVal, oldVal) => {
    //价格配置ID
    if (props.params.priceConfigId) {
      priceConfigId.value = props.params.priceConfigId;
      //查询数据
      loadDetail();
    }
  },
  { deep: true, immediate: true }
);

// 页面初始化
onMounted(() => {
  // 如果没有通过props传递参数，则从路由参数获取（兼容直接访问页面的情况）
  if (!props.params.priceConfigId && route.query.id) {
    priceConfigId.value = route.query.id;
    loadDetail();
  }
});
</script>

<style scoped>

</style>
